<script setup lang='ts'>
import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import StackingReclaimingHistory from './ui/StackingReclaimingHistory.vue'
import StatisticAnalysis from './ui/StatisticAnalysis.vue'

const activeName = ref('first')

// refs
const stackingReclaimingHistoryRef = ref()
const statisticAnalysisRef = ref()

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
</script>

<template>
  <div class="production-statistics-main-box">
    <div class="tabs-box">
      <el-tabs
        v-model="activeName"
        type="card"
        class="production-statistics-tabs"
        @tab-click="handleClick"
      >
        <el-tab-pane
          label="堆取料历史"
          name="first"
        >
          <StackingReclaimingHistory ref="stackingReclaimingHistoryRef" />
        </el-tab-pane>
        <el-tab-pane
          label="统计分析"
          name="second"
        >
          <StatisticAnalysis ref="statisticAnalysisRef" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<style scoped lang=scss>
.production-statistics-main-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: #fff;

  .tabs-box {
    width: 98%;
    height: 96%;

    /* border: 1px solid red; */
    box-shadow: #dbd9d9 0 0 0 1px;
  }
}
</style>
<style lang="scss">
/* .production-statistics-tabs {
  border: 1px solid red;
} */
</style>